<template>
  <div class="box">
    <!-- 头部 -->
      <div class="header">
        <van-icon name="arrow-left" @click="goBack" />
        <span>商品分类</span>
      </div>
    <!-- 内容区 -->
    <div class="content">
      <!-- 侧边栏 -->
      <van-sidebar v-model="activeKey" @change="changeCate">
        <van-sidebar-item
          v-for="(item, index) in cateList"
          :key="index"
          :title="item"
        />
      </van-sidebar>
      <!-- 将侧边栏每一类内容对应的品牌渲染到右边 -->
      <van-grid :column-num="4">
        <van-grid-item
          v-for="(item, index) in goodsList"
          :key="index"
          :text="item.brand"
          @click="goBrand(item)"
        />
      </van-grid>
    </div>
    <!-- 底部 -->
 
  </div>
</template>
 
<script>


export default {
  name: "Category",
  components: {
  
  },
  data() {
    return {
      activeKey: 0,
      cateList: [],
      goodsList: [],
      category: '手机',
    };
  },
 
  methods: {
    goBack() {
      this.$router.back();
    },
    goBrand(item){
      
    }
   
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff;
}
.content {
  flex: 1;
  overflow: auto;
  display: flex;
}
.footer {
  background-color: #fff;
}
.van-grid {
  flex: 1;
  align-self: flex-start;
}
.van-grid-item {
  height: 6.25rem;
}
.header {
 height: 3.5rem;
 text-align: center;
 font-size: 1.3rem;
 line-height: 3.5rem;
 border-bottom: 2px solid gray;
}
.van-icon {
 float: left;
 padding-left: 10px;
 line-height: 3.5rem;
 color: rgb(24, 24, 64);
}
.van-grid-item{
  /*多行加省略号*/
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: no-wrap;
}
</style>